<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/slide.css"/>
	</head>
	<body>
		<div class="js-poster poster-main" data-setting='{
			       "width":1400,
			       "height":320,
			       "posterWidth":800,
			       "posterHeight":300,
			       "scale":0.9,
			       "autoplay":"true",
			       "speed":500,
			       "director":"right",
			       "deplay":1000
			}'>
			<div class="prebtn btn">
				<img src="img/btn_l.png"/>
			</div>
			<ul class="poster-list">
				<li class="poster-item"><a href="#"><img src="img/1.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/2.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/3.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/4.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/5.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/6.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/7.jpg"/></a></li>
			</ul>

			<div class="nextbtn btn">
				<img src="img/btn_r.png"/>
			</div>
		</div>
		
		<div style="width: 100%;height: 50px;"></div>
		<div class="js-poster poster-main" data-setting='{
			       "width":1000,
			       "height":320,
			       "posterWidth":800,
			       "posterHeight":300,
			       "scale":0.9,
			       "autoplay":true,
			       "speed":1000,
			       "director":"right",
			       "deplay":2000
			}'>
			<div class="prebtn btn">
				<img src="img/btn_l.png"/>
			</div>
			<ul class="poster-list">
				<li class="poster-item"><a href="#"><img src="img/1.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/2.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/3.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/4.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/5.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/6.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/7.jpg"/></a></li>
			</ul>

			<div class="nextbtn btn">
				<img src="img/btn_r.png"/>
			</div>
		</div>
		
		<div style="width: 100%;height: 50px;"></div>
		<div class="js-poster poster-main" data-setting='{
			       "width":1000,
			       "height":320,
			       "posterWidth":800,
			       "posterHeight":300,
			       "scale":0.9,
			       "autoplay":true,
			       "speed":1000,
			       "director":"right",
			       "deplay":2000
			}'>
			<div class="prebtn btn">
				<img src="img/btn_l.png"/>
			</div>
			<ul class="poster-list">
				<li class="poster-item"><a href="#"><img src="img/1.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/2.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/3.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/4.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/5.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/6.jpg"/></a></li>
				<li class="poster-item"><a href="#"><img src="img/7.jpg"/></a></li>
			</ul>

			<div class="nextbtn btn">
				<img src="img/btn_r.png"/>
			</div>
		</div>
		
		<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/slide.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			(function(){
				Carousel.init($(".js-poster"));
			})();
			
		</script>
		
	</body>
</html>
